<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
    <meta charset='utf-8'>
    <title>Fresco | Drawee的各种效果配置</title>
    <link rel='stylesheet' href='/static/site.css' type='text/css'/>
    <link rel="stylesheet" href='/static/pygments.css' type='text/css'/>
    <link rel='shortcut icon' href='/static/favicon.png'>
    <meta name='viewport' content='width=480'>
    <meta property="og:title" content="Drawee的各种效果配置" />
    <meta property="og:site_name" content="fresco">
    <meta property='og:description' content='Fresco is an image management library.'>
    <meta property='og:image' content='http://facebook.github.io/fresco/static/fresco-og-image.png'>
    <meta property='og:url' content="http://facebook.github.io/fresco/docs/drawee-components.html">
    
    <meta property='og:type' content='website'>
    
    <script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
    <script type="text/javascript">{'try{Typekit.load();}catch(e){}'}</script>
    <!-- Google Analytics -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-43024238-8', 'auto');
      ga('send', 'pageview');

    </script>
</head>
<body>

<header class='topbar'><nav class='width'>
<a href='/'>
  <img src="/static/fresco-logo.png" class="logo">
</a>
    <ul>
      <li><a href="/docs/index.html#_"
          
          class="active" >
          文档
      </a></li>
      <li><a href="/"
          >
          关于
      </a></li>
      <li><a href="/support.html"
          >
          支持
      </a></li>
      <li><a href="/javadoc">
          API
      </a></li>
      <li><a href="http://github.com/facebook/fresco">GitHub</a>
      <li><a href="/about.html"
          >
      关于本文档</a></li>
    </ul>
</nav></header>


<section class='content'><div class='width'>

<nav class='toc'>
  
    <section>
      <h3>配置和使用</h3>
      <ul>
        
          <li>
            <a href="/docs/download-fresco.html#_">
              下载
            </a>
            
          </li>
        
          <li>
            <a href="/docs/index.html#_">
              配置和开始使用
            </a>
            
          </li>
        
          <li>
            <a href="/docs/concepts.html#_">
              关键概念
            </a>
            
          </li>
        
          <li>
            <a href="/docs/supported-uris.html#_">
              支持的 URIs
            </a>
            
          </li>
        
      </ul>
    </section>
  
    <section>
      <h3>Drawee 指南</h3>
      <ul>
        
          <li>
            <a href="/docs/using-drawees-xml.html#_">
              在XML中使用 Drawees
            </a>
            
          </li>
        
          <li>
            <a href="/docs/using-drawees-code.html#_">
              在Java代码中使用 Drawees
            </a>
            
          </li>
        
          <li>
            <a href="/docs/drawee-components.html#_" class="active">
              Drawee的各种效果配置
            </a>
            
          </li>
        
          <li>
            <a href="/docs/scaling.html#_">
              缩放
            </a>
            
          </li>
        
          <li>
            <a href="/docs/rounded-corners-and-circles.html#_">
              圆角/圆圈
            </a>
            
          </li>
        
          <li>
            <a href="/docs/using-controllerbuilder.html#_">
              使用ControllerBuilder
            </a>
            
          </li>
        
          <li>
            <a href="/docs/progressive-jpegs.html#_">
              渐进式JPEG图
            </a>
            
          </li>
        
          <li>
            <a href="/docs/animations.html#_">
              动画图(gif)
            </a>
            
          </li>
        
          <li>
            <a href="/docs/requesting-multiple-images.html#_">
              多图请求及图片复用
            </a>
            
          </li>
        
          <li>
            <a href="/docs/listening-download-events.html#_">
              监听下载事件
            </a>
            
          </li>
        
          <li>
            <a href="/docs/resizing-rotating.html#_">
              缩放和旋转
            </a>
            
          </li>
        
          <li>
            <a href="/docs/modifying-image.html#_">
              图片的修改
            </a>
            
          </li>
        
          <li>
            <a href="/docs/image-requests.html#_">
              图片请求
            </a>
            
          </li>
        
          <li>
            <a href="/docs/writing-custom-views.html#_">
              自定义View
            </a>
            
          </li>
        
          <li>
            <a href="/docs/gotchas.html#_">
              一些陷阱
            </a>
            
          </li>
        
      </ul>
    </section>
  
    <section>
      <h3>Image Pipeline 指南</h3>
      <ul>
        
          <li>
            <a href="/docs/intro-image-pipeline.html#_">
              什么是Image Pipeline
            </a>
            
          </li>
        
          <li>
            <a href="/docs/configure-image-pipeline.html#_">
              配置Image Pipeline
            </a>
            
          </li>
        
          <li>
            <a href="/docs/caching.html#_">
              缓存的行为控制
            </a>
            
          </li>
        
          <li>
            <a href="/docs/using-image-pipeline.html#_">
              直接使用Image Pipeline
            </a>
            
          </li>
        
          <li>
            <a href="/docs/datasources-datasubscribers.html#_">
              数据源/订阅数据源
            </a>
            
          </li>
        
          <li>
            <a href="/docs/closeable-references.html#_">
              可关闭的引用
            </a>
            
          </li>
        
      </ul>
    </section>
  
    <section>
      <h3>第三方类库</h3>
      <ul>
        
          <li>
            <a href="/docs/using-other-network-layers.html#_">
              自定义网络加载
            </a>
            
          </li>
        
          <li>
            <a href="/docs/using-other-image-loaders.html#_">
              使用其他的Image Loader
            </a>
            
          </li>
        
      </ul>
    </section>
  
</nav>


<article class='withtoc'>
    <h1>
      Drawee的各种效果配置
      <a class="edit-page-link" href="https://github.com/liaohuqiu/fresco-docs-cn/blob/docs/docs/01-drawee-components.md" target="_blank">编辑和纠错</a>
    </h1>
    <p></p>

    <h2>内容导航</h2>

<ul>
<li><a href="#Definitions">定义</a></li>
<li><a href="#Actual">设置要加载的图片</a></li>
<li><a href="#Placeholder">占位图</a></li>
<li><a href="#Failure">加载失败时的占位图</a></li>
<li><a href="#Retry">点击重新加载</a></li>
<li><a href="#ProgressBar">显示一个进度条</a></li>
<li><a href="#Backgrounds">Backgrounds</a></li>
<li><a href="#Overlays">Overlays</a></li>
<li><a href="#PressedStateOverlay">Pressed State Overlay</a></li>
</ul>

<h2><a name='Definitions'></a>定义</h2>

<p>本页说明如何设置实现不同的图片呈现效果。</p>

<p>除了要加载的图片，其他各个设置都可以在xml中指定。在xml中指定的时候，可以是drawable/下的资源，也可以颜色。</p>

<p>在Java 代码中也可以指定。如果需要 <a href="using-drawees-code.html">通过程序设定</a> 的话会接触到这个类: <a href="../javadoc/reference/com/facebook/drawee/generic/GenericDraweeHierarchyBuilder.html">GenericDraweeHierarchyBuilder</a> </p>

<p>通过代码设置是，设置的值可以是资源id，也可以是Drawable的子类。</p>

<p>创建完<a href="../javadoc/reference/com/facebook/drawee/generic/GenericDraweeHierarchy.html">GenericDraweeHierarchy</a>之后，也可以通过该类的相关方法，重新设置一些效果。</p>

<p>大多数的用户呈现不同效果的drawables都是可以<a href="scaling.html">缩放的</a>.</p>

<h2><a name='Actual'></a>设置要加载的图</h2>

<p>除了需要加载的图片是真正必须的，其他的都是可选的。如前所述，图片可以来自多个地方。</p>

<p>所需加载的图片实际是DraweeController的一个属性，而不是DraweeHierarchy的属性。</p>

<p>可使用<code>setImageURI</code>方法或者<a href="using-controllerbuilder.html">通过设置DraweeController</a> 来进行设置。</p>

<p>对于要加载的图片，除了可以设置缩放类型外，DraweeHierarchy 还公开出一些其他方法用来控制显示效果:</p>

<ul>
<li>focus point (居中焦点, 用于<a href="scaling.html#FocusCrop">focusCrop缩放模式</a>)</li>
<li>color filter</li>
</ul>

<p>默认的缩放类型是: <code>centerCrop</code></p>

<h2><a name="Placeholder"></a>占位图(Placeholder)</h2>

<p>在调用<code>setController</code> 或者 <code>setImageURI</code> 之后，占位图开始现实，直到图片加载完成。</p>

<p>对于渐进式格式的JPEG图片，占位图会显示直到满足已加载的图片解析度到达设定值。</p>

<p>XML 中属性值: <code>placeholderImage</code><br>
Hierarchy builder中的方法: <code>setPlaceholderImage</code><br>
Hierarchy method: <code>setPlaceholderImage</code><br>
默认值: a transparent <a href="http://developer.android.com/reference/android/graphics/drawable/ColorDrawable.html">ColorDrawable</a><br>
默认缩放类型: <code>centerInside</code>  </p>

<h2><a name='Failure' ></a>设置加载失败占位图</h2>

<p>如果URI是无效的，或者下载过程中网络不可用，将会导致加载失败。当加载图片出错时，你可以设置一个出错提示图片。</p>

<p>XML 中属性值: <code>failureImage</code><br>
Hierarchy builder中的方法: <code>setFailureImage</code><br>
默认值: The placeholder image<br>
默认缩放类型: <code>centerInside</code></p>

<h2><a name='Retry'></a>点击重新加载图</h2>

<p>在加载失败时，可以设置点击重新加载。这时提供一个图片，加载失败时，会显示这个图片（而不是失败提示图片），提示用户点击重试。</p>

<p>在<a href="using-controllerbuilder.html">ControllerBuilder</a> 中如下设置:</p>
<div class="highlight"><pre><code class="language-java" data-lang="java"><span class="o">.</span><span class="na">setTapToRetryEnabled</span><span class="o">(</span><span class="kc">true</span><span class="o">)</span>
</code></pre></div>
<p>加载失败时，image pipeline 会重试四次；如果还是加载失败，则显示加载失败提示图片。</p>

<p>XML 中属性值: <code>retryImage</code><br>
Hierarchy builder中的方法: <code>setRetryImage</code><br>
默认值: The placeholder image<br>
默认缩放类型: <code>centerInside</code></p>

<h2><a name="ProgressBar"></a>显示一个进度条</h2>

<p>设置一个进度条图片，提示用户正在加载。目前，进度条仅仅是提示正在loading，和加载进度无关。</p>

<p>XML 中属性值: <code>progressBarImage</code><br>
Hierarchy builder中的方法: <code>setProgressBarImage</code><br>
默认值: None<br>
默认缩放类型: <code>centerInside</code></p>

<h2><a name='Backgrounds'></a>背景</h2>

<p>背景图会最先绘制，在XML中只可以指定一个背景图，但是在JAVA代码中，可以指定多个背景图。</p>

<p>当指定一个背景图列表的时候，列表中的第一项会被首先绘制，绘制在最下层，然后依次往上绘制。</p>

<p>背景图片不支持缩放类型，会被强制到<code>Drawee</code>尺寸大小。</p>

<p>XML 中属性值: <code>backgroundImage</code><br>
Hierarchy builder中的方法: <code>setBackground,</code> <code>setBackgrounds</code><br>
默认值: None<br>
默认缩放类型: N/A</p>

<h2><a name='Overlays'></a>设置叠加图(Overlay)</h2>

<p>叠加图会最后被绘制。</p>

<p>和背景图一样，XML中只可以指定一个，如果想指定多个，可以通过JAVA代码实现。</p>

<p>当指定的叠加图是一个列表的时候，列表第一个元素会被先绘制，最后一个元素最后被绘制到最上层。</p>

<p>同样的，不支持各种缩放类型。</p>

<p>XML 中属性值: <code>overlayImage</code><br>
Hierarchy builder中的方法: <code>setOverlay,</code> <code>setOverlays</code><br>
默认值: None<br>
默认缩放类型: N/A</p>

<h2><a name="PressedStateOverlay"></a>设置按压状态下的叠加图</h2>

<p>同样不支持缩放，用户按压DraweeView时呈现。</p>

<p>XML 中属性值: <code>pressedStateOverlayImage</code><br>
Hierarchy builder中的方法: <code>setPressedStateOverlay</code><br>
默认值: None<br>
默认缩放类型: N/A</p>


    <div class="docs-prevnext">
      
        <a href="/docs/using-drawees-code.html#_">&larr; 上一页</a>
      
      
        <a class="right" href="/docs/scaling.html#_">下一页 &rarr;</a>
      
    </div>

    <a id="_"></a>
</article>

</div></section>
<footer><div class='width'>
    &copy; Copyright 2015, Facebook Inc.
</div></footer>

<script src="/static/linkify.js"></script>
<!-- Google Analytics -->
</body>
</html>

